<script setup lang="ts">

</script>

<template>
  <div class="trees">
    <div v-for="tree, i in 3" :key="i" class="tree_one_box">
      <div class="tree">
        <div class="leafs1 leaf"></div>
        <div class="leafs2 leaf"></div>
        <div class="leafs3 leaf"></div>
        <div class="leafs4 leaf"></div>

        <div class="main_mast"></div>
      </div>
    </div>

  </div>
</template>

<style lang='scss' scoped>
@keyframes treeBack {
  to {
    transform: translateX(calc(-100% / 3));
  }
}

.trees {
  display: flex;
  width: 300%;
  height: 100%;
  // background-color: #ff0;

  animation: treeBack 3s linear infinite;

  .tree_one_box {
    flex-shrink: 0;
    width: calc(100% / 3);
  }

  .tree {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    left: 15%;
    width: 15%;
    height: 100%;

    .leaf {
      background-color: #0f0;
    }

    .leafs1 {
      width: 30%;
      height: 15%;
    }

    .leafs2 {
      width: 50%;
      height: 20%;
    }

    .leafs3 {
      width: 70%;
      height: 20%;
    }

    .leafs4 {
      width: 100%;
      height: 25%;
    }

    .main_mast {
      width: 20%;
      height: 20%;
      background-color: #ad7b59;
    }
  }

}

@media (max-width: 768px) {
  .trees {
    .tree {
      width: 30%;
    }
  }
}
</style>